<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3..虚拟DOM与真实DOM</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器，后期react会将工作成果放进去（一些结构） -->
		<div id="test"></div>

		<script type="text/babel">
			//第一步：创建一个虚拟DOM
			const VDOM = (
				<h1>
					<span>Hello,React！</span>
				</h1>
			)
			//第二步：借助react将虚拟DOM转为真实DOM放入页面
			ReactDOM.render(VDOM,document.getElementById('test'))

			console.dir(VDOM) //虚拟DOM
			const TDOM = document.getElementById('test')
			console.dir(TDOM)

			/* 
				关于虚拟DOM：
					1.本质就是一个一般对象（Object类型对象）
					2.虚拟DOM比较“轻”，真实DOM比较“重”
					3.虚拟DOM最终一定会通过react转为真实DOM，放入页面
			*/
		</script>
		
	</body>
</html>